<template>
  <ele-card header="热门搜索">
    <v-chart
      ref="hotSearchChartRef"
      :option="hotSearchChartOption"
      style="height: 338px"
      @click="handleHotSearchChartClick"
    />
  </ele-card>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { LineChart, BarChart } from 'echarts/charts';
  import { GridComponent, TooltipComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  import 'echarts-wordcloud';
  import { EleMessage } from 'ele-admin-plus/es';
  import { useEcharts } from '@/utils/use-echarts';

  use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent]);

  const hotSearchChartRef = ref(null);

  useEcharts([hotSearchChartRef]);

  /** 词云图表配置 */
  const hotSearchChartOption = reactive({});

  /** 获取词云数据 */
  const getWordCloudData = () => {
    const data = [
      { name: '软妹子', value: 23 },
      { name: '汪星人', value: 23 },
      { name: '长腿欧巴', value: 23 },
      { name: '萝莉', value: 22 },
      { name: '辣~', value: 22 },
      { name: 'K歌', value: 22 },
      { name: '大长腿', value: 21 },
      { name: '川妹子', value: 21 },
      { name: '女神', value: 21 },
      { name: '米粉', value: 20 },
      { name: '专注设计', value: 20 },
      { name: '逛街', value: 20 },
      { name: '黑长直', value: 20 },
      { name: '海纳百川', value: 19 },
      { name: '萌萌哒', value: 19 },
      { name: '坚持', value: 19 },
      { name: '话唠', value: 19 },
      { name: '果粉', value: 18 },
      { name: '喵星人', value: 18 },
      { name: '花粉', value: 18 },
      { name: '衬衫控', value: 18 },
      { name: '宅男', value: 17 },
      { name: '小清新', value: 17 },
      { name: '眼镜男', value: 17 },
      { name: '琼瑶', value: 17 },
      { name: '穷游党', value: 16 },
      { name: '铲屎官', value: 16 },
      { name: '正太', value: 16 },
      { name: '中二病', value: 16 },
      { name: '夜猫子', value: 15 },
      { name: '逗比', value: 15 },
      { name: '腹黑', value: 15 },
      { name: '吃鸡', value: 15 },
      { name: '为了联盟', value: 14 },
      { name: '背包客', value: 14 },
      { name: '民谣', value: 14 },
      { name: '为了部落', value: 14 },
      { name: '懒癌患者', value: 13 },
      { name: '追剧', value: 13 },
      { name: 'IT民工', value: 13 },
      { name: 'CNB成员', value: 13 },
      { name: '选择困难', value: 12 },
      { name: '锤粉', value: 12 },
      { name: '欧皇', value: 12 },
      { name: '仙气十足', value: 12 }
    ];
    Object.assign(hotSearchChartOption, {
      tooltip: { show: true, confine: true, borderWidth: 1 },
      series: [
        {
          type: 'wordCloud',
          width: '100%',
          height: '100%',
          sizeRange: [12, 24],
          gridSize: 6,
          textStyle: {
            color: () => {
              const colors = [
                '#025DF4',
                '#DB6BCF',
                '#2498D1',
                '#BBBDE6',
                '#4045B2',
                '#21A97A',
                '#FF745A',
                '#007E99',
                '#FFA8A8',
                '#2391FF',
                '#FFC328',
                '#A0DC2C',
                '#946DFF',
                '#626681',
                '#EB4185',
                '#CD8150',
                '#36BCCB',
                '#327039',
                '#803488',
                '#83BC99'
              ];
              return colors[
                Math.floor(Math.random() * (0 - colors.length) + colors.length)
              ];
            }
          },
          emphasis: {
            textStyle: { shadowBlur: 8, shadowColor: 'rgba(0, 0, 0, .15)' }
          },
          data: data
        }
      ]
    });
  };

  /** 图表点击事件 */
  const handleHotSearchChartClick = (params) => {
    EleMessage.info({
      message: `点击了: ${params.name} , 搜索量: ${params.value}`,
      plain: true
    });
  };

  getWordCloudData();
</script>
